[#include "../html.ftl" /]
[@html]
    [@head title="DB Adminer - 安全中心" css=["fw", "slidercaptcha", "error"] ]

        <style>
            #captcha canvas{
                border-radius: 2px;
            }
            #captcha .refreshIcon {
                top: 5px;
                font-size: 16px;
                right: 10px;
                color: #fff;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), 2px 2px 3px rgba(0, 0, 0, 0.5);
            }
            #captcha .sliderContainer {
                margin-right: 2px;
            }
        </style>
    [/@head]
    [@body class="fw-grey-bg"]
        <div class="am-g db-logo">
            <div class="am-u-sm-centered am-radius">
                <table>
                    <tr>
                        <td rowspan="2" >
                            <div class='basicInfo-left'>
                                <img class="icon" src="${ctx}/osfw/framework/error/img/logo.jpg" alt="DB Adminer"/>
                            </div>
                        </td>
                        <td height="30px" class="am-text-primary am-kai am-text-bottom am-text-lg"><b>DB Adminer</b></td>
                    </tr>
                    <tr>
                        <td height="22px" class="am-text-default am-kai am-text-top am-text-xs"><b>网页版数据库管理</b></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="am-g db-link">
            <div class="am-thumbnail am-u-sm-centered am-radius" style="width: 600px;height: 416px;">
                <figcaption class="am-thumbnail-caption" >
                    <div id="captcha" style="border-radius: 3px;"></div>
                </figcaption>
            </div>
        </div>

        [@fixedFooter/]

        [@script js=["fw", "base64", "slidercaptcha", "error"] ]
            <!-- 自定义js -->
            <script type="text/javascript">
                var startX,startY;

                document.addEventListener("touchstart",function(e){

                    startX = e.targetTouches[0].pageX;
                    startY = e.targetTouches[0].pageY;
                });

                document.addEventListener("touchmove",function(e){

                    var moveX = e.targetTouches[0].pageX;
                    var moveY = e.targetTouches[0].pageY;

                    if(Math.abs(moveX-startX)>Math.abs(moveY-startY)){
                        e.preventDefault();
                    }
                },{passive:false});

                $(function () {
                    $('.slider').css('pointer-events', '');
                });
                $('#captcha').sliderCaptcha({
                    width: 616,
                    height: 350,
                    repeatIcon: 'am-icon-refresh',
                    barText: '向右滑动填充拼图，获得登录授权',
                    setSrc: function () {
                        var min = Math.ceil(1);
                        var max = Math.floor(4);
                        var index = Math.floor(Math.random() * (max - min + 1)) + min;
                        return ctx + 'osfw/framework/error/slidercaptcha/img/Pic' + index + '.jpg';
                    },
                    onSuccess: function () {
                        $('.slider').css('pointer-events', 'none');
                        $('.sliderText').css('pointer-events', 'none');
                        $.operate.get(ctx + "osfw/doAuth", function (res) {
                            if(res.code == web_status.SUCCESS) {
                                setTimeout(function () {
                                    location.replace(decodeURIComponent($.base64.decode(res.data)));
                                },1500);
                            }
                        });
                    },
                    onRefresh: function () {
                        $('.slider').css('pointer-events', '');
                    }
                });
            </script>
        [/@script]
    [/@body]
[/@html]